<template>
	<view class="userpage">
		<view class="searchbox">
			<view class="putbox">
				<input type="text" placeholder="请输入用户名称"  v-model="searchvalue"/>
				<view class="searchbtn">
					搜索
				</view>
			</view>
		</view>
		<view class="toptabbar">
			<view class="itemtabbar" :class="toptab==1?'act':''" @click="selecttoptab(1)">
				<view class="barname">
					全部用户
				</view>
				<view class="number">
					(999人)
				</view>
				<view class="line">
					
				</view>
			</view>
			<view class="itemtabbar" :class="toptab==2?'act':''" @click="selecttoptab(2)">
				<view class="barname">
					我主管的
				</view>
				<view class="number">
					(999人)
				</view>
				<view class="line">
					
				</view>
			</view>
			<view class="itemtabbar" :class="toptab==3?'act':''" @click="selecttoptab(3)">
				<view class="barname">
					我协管的
				</view>
				<view class="number">
					(999人)
				</view>
				<view class="line">
					
				</view>
			</view>
			
		</view>
		
		<view class="listbox">
			<view class="itemlist">
				<view class="imgbox">
					<image src="https://changban.dianjingkeji.net/img/微信图片_20230817153730.jpg" mode=""></image>
				</view>
				<view class="infobox">
					<view class="nameline">
						<view class="name">
							王先生
						</view>
						
					</view>
					<view class="label">
						这是消息内容这是消息内容
					</view>
				</view>
				<view class="right">
					17:30
				</view>
			</view>
		</view>
		
	
		
		
		
		
		
		
		
		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchvalue:'',
				toptab:1,
				
			}
		},
		methods: {
			selecttoptab(e){
				this.toptab=e
			},
			
			
	
		}
	}
</script>

<style lang="less" scoped>
  .userpage{
	  width: 750rpx;
	  box-sizing: border-box;
	  .searchbox{
		  width: 100%;
		 box-sizing: border-box;
		  padding: 20rpx 40rpx;
		  background-color: #1a4f8a;
		  .putbox{
			  width: 100%;
			  background-color: white;
			  display: flex;
			  align-items: center;
			  justify-content: space-between;
			  border-radius: 35rpx;
			  height: 70rpx;
			  line-height: 70rpx;
			  padding: 0 20rpx;
			  box-sizing: border-box;
			  input{
				  width: 80%;
				  height: 70rpx;
				  
			  }
			  .searchbtn{
				   box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.3);
				  width: 100rpx;
				  height: 60rpx;
				  text-align: center;
				  line-height: 60rpx;
				  border-radius: 30rpx;
				  font-size: 30rpx;
				  font-weight: bold;
				  
				  
			  }
		  }
	  }
	  .toptabbar{
		  width: 92%;
		  margin: 20rpx auto;
		  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.3);
		  background-color: white;
		  border-radius: 20rpx;
		  box-sizing: border-box;
		  padding: 10rpx 30rpx 0 30rpx;
		  display: flex;
		  align-items: center;
		  justify-content: space-evenly;
		  font-size: 30rpx;
		  color: #8B8B8B ;
		  .itemtabbar{
			  width: 33%;
			  text-align: center;
			  font-weight: bold;
			  .line{
				  width: 60rpx;
				  height: 6rpx;
				  border-radius: 3rpx;
				  margin: auto;
			  }
		  }
		  .act{
			  font-size: 32rpx;
			  color: #1a4f8a;
			   .line{
				   background-color: #1a4f8a;
			   }
		  }
	  }
	  .listbox{
		  width: 92%;
		  margin: 20rpx auto;
		  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.3);
		  background-color: white;
		  border-radius: 20rpx;
		  box-sizing: border-box;
		  padding: 10rpx 30rpx 0 30rpx;
		  .itemlist{
			  width: 100%;
			  display: flex;
			  align-items: center;
			  justify-content: space-evenly;
			  padding: 20rpx 0;
			  .imgbox{
				  width: 100rpx;
				  height: 100rpx;
				  border-radius: 50%;
				  image{
					  width: 100%;
					  height: 100%;
					  border-radius: 50%;
					  
				  }
			  }
			  .infobox{
				  width: 50%;
				  line-height: 1.8;
				  .nameline{
					  display: flex;
					  align-items: center;
					  .name{
						  font-weight: bold;
						  margin-right: 20rpx;
					  }
					  .level{
						  border: 1rpx solid #1a4f8a;
						  font-size: 26rpx;
						  font-weight: bold;
						  color: #1a4f8a;
						  padding: 2rpx 10rpx;
						  border-radius: 6rpx;
						  
					  }
				  }
				  .label{
					  font-size: 26rpx;
					  font-weight: bold;
				  }
			  }
			  .right{
				 
				  font-size: 30rpx;
				  font-weight: bold;
				  
			  }
		  }
	  }
	 
	  

	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  

	  
  }
</style>
